<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相机测试 - Web 视觉检测系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
    <div class="container">
        <header>
            <h1>📷 相机测试</h1>
            <p>测试摄像头连接和视频流</p>
        </header>

        <div class="detection-container">
            <div class="detection-header">
                <h2>实时视频流</h2>
                <a href="/" class="btn btn-secondary">← 返回主页</a>
            </div>

            <div class="info-box">
                <p><strong>功能说明：</strong></p>
                <p>• 显示摄像头的实时视频流</p>
                <p>• 左上角显示当前 FPS（每秒帧数）</p>
                <p>• 用于测试摄像头连接和系统性能</p>
            </div>

            <div class="video-container">
                <img src="{{ url_for('video_feed', detection_type='camera_test') }}" alt="视频流" class="video-stream"
                    onerror="this.src=''; this.alt='❌ 无法加载视频流';">
                <div class="video-loading">
                    <div class="spinner"></div>
                    <p>正在加载视频流...</p>
                </div>
            </div>

            <div class="controls">
                <h3>系统信息</h3>
                <p>🎥 <strong>分辨率：</strong>640 x 480</p>
                <p>🖥️ <strong>编码格式：</strong>JPEG (质量 85%)</p>
                <p>📡 <strong>传输方式：</strong>HTTP Multipart Stream</p>
            </div>
        </div>

        <footer>
            <p>Web 视觉检测系统 | 相机测试模块</p>
        </footer>
    </div>

    <script>
        // 视频加载完成后隐藏加载提示
        document.querySelector('.video-stream').onload = function () {
            const loading = document.querySelector('.video-loading');
            if (loading) {
                loading.style.display = 'none';
            }
        };
    </script>
</body>

</html>